<template>
	<view class="main">
		<!-- 登录背景图 -->
		<view class="loginBg"></view>
		<!-- 登录区 -->
		<view class="loginBox">
			<view class="avatarBox">
				<image src="/static/meImg/未登录.png" mode="aspectFill"></image>
			</view>
			<view class="infoBox">
				<view class="integralBox">
					<view class="top">
						<image src="/static/meImg/积分.png" mode="aspectFill"></image>
						积分
					</view>
					<view class="bottom">0</view>
				</view>
				<view class="loginBut">
					<u-button @click="login" text="未登录" type="warning" :plain="true" :hairline="true"></u-button>
				</view>
				<view class="couponBox">
					<view class="top">
						<image src="/static/meImg/优惠券.png" mode="aspectFill"></image>
						优惠券
					</view>
					<view class="bottom">0&nbsp;张</view>
				</view>
			</view>
		</view>
		<!-- 订单区 -->
		<view class="orderBox">
			<view class="orderTitle">我的订单</view>
			<view class="orderInfo">
				<!-- 待付款 -->
				<view class="pendingPayment">
					<image src="/static/meImg/待付款.png" mode="aspectFill"></image>
					待付款
				</view>
				<!-- 待发货 -->
				<view class="pendingShipped">
					<image src="/static/meImg/待发货.png" mode="aspectFill"></image>
					待发货
				</view>
				<!-- 待收货 -->
				<view class="pendingReceived">
					<image src="/static/meImg/待收货.png" mode="aspectFill"></image>
					待收货
				</view>
			</view>
		</view>

		<!-- 活动中心 -->
		<view class="activityCenterBox">
			<view class="activityTitle">活动中心</view>
			<view class="avtivityInfo">
				<!-- 签到有礼 -->
				<view class="signIn">
					<image src="/static/meImg/签到有礼.png" mode="aspectFill"></image>
					签到有礼
				</view>
				<!-- 领券中心 -->
				<view class="certificate">
					<image src="/static/meImg/领券中心.png" mode="aspectFill"></image>
					领券中心
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		login() {
			uni.showToast({
				title: '登录自己写哟...',
				icon: 'error'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f5f5f5;
}
.main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	@mixin box {
		width: 700rpx;
		height: 300rpx;
		background-color: white;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
		padding: 20rpx;
		box-sizing: border-box;
	}

	@mixin boxTitle {
		height: 50rpx;
		font-size: 28rpx;
		font-weight: bold;
		border-bottom: 1rpx solid #f5efef;
	}

	.loginBg {
		width: 750rpx;
		height: 400rpx;
		box-sizing: border-box;
		background-image: linear-gradient(to top, #feada6 0%, #f5efef 100%);
		border-bottom-left-radius: 500rpx;
		border-bottom-right-radius: 500rpx;
		position: absolute;
		top: 0;
	}

	.loginBox {
		@include box;
		padding: 0;
		position: relative;
		height: 200rpx;
		margin-top: 200rpx;
		.avatarBox {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			overflow: hidden;
			position: absolute;
			left: 50%;
			transform: translate(-50%, -50%);
			image {
				width: 100%;
				height: 100%;
			}
		}
		.infoBox {
			width: 100%;
			height: 70%;
			box-sizing: border-box;
			position: absolute;
			bottom: 0;
			vertical-align: bottom;
			display: flex;

			.integralBox,
			.couponBox,
			.loginBut {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.top {
					font-size: 26rpx;
					color: #82848a;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 12rpx;

					image {
						width: 36rpx;
						height: 36rpx;
						margin-right: 10rpx;
					}
				}
				.bottom {
					text-align: center;
					font-weight: bold;
				}
			}
		}
	}

	.orderBox {
		@include box;
		display: flex;
		flex-direction: column;

		.orderTitle {
			@include boxTitle;
		}
		.orderInfo {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			.pendingPayment,
			.pendingShipped,
			.pendingReceived {
				flex: 1;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				image {
					width: 120rpx;
					height: 120rpx;
				}
			}
		}
	}

	.activityCenterBox {
		@include box;
		display: flex;
		flex-direction: column;

		.activityTitle {
			@include boxTitle;
			color: #82848a;
			font-weight: normal;
		}

		.avtivityInfo {
			flex: 1;
			display: flex;
			justify-content: flex-start;
			.signIn,
			.certificate {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin: 0 20rpx;
				font-size: 28rpx;
				color: #82848a;
				image {
					width: 120rpx;
					height: 120rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}
}
</style>
